<template>
	<!-- 物资管理列表 -->
	<view>
		<view class="page">
			<view class="example-body" v-if="equipmentRun">
				<uni-nav-bar background-color="#003466" color="#ffffff" :status-bar="true" @click-left="back" left-icon="arrowleft" style="position: relative;">
					<view class="flex-item" style="position: absolute;left: 0;right: 0;margin: auto;width: 50%;">故障管理</view>
					<view class="flex-item flex-right" style="position: absolute;right: 22px;" @click="showDrawer">
						<uni-icon type="bars" size="24" color="#ffffff"></uni-icon>
					</view>
				</uni-nav-bar>
			</view>

			<!--筛选条件-->
			<uni-drawer v-if="equipmentRun" :visible="showRight" mode="right" @close="closeDrawer">
				<uni-search @searchData="searchData" :listData="drawerData" :listParam="listParam"></uni-search>
			</uni-drawer>

			<view>
				<view class="supply-search" v-if="equipmentRun">
					<input type="text" value="" placeholder="请输入关键字 ( 故障描述 )" class="search-container" />
					<view class="item" v-for="(value, index) in iconType" :key="index">
						<uni-icon :type="value" :size="24" color="#A0A0A0" class="listsearch"></uni-icon>
					</view>
				</view>
				<navigator
					v-if="equipmentRun"
					class="supply-list"
					:url="'malfunction-manage-detail?id=' + listData[index].id + '&status=' + listData[index].status"
					v-for="(item, index) in listData"
					:key="index"
				>
					<view class="supply-option">
						<view class="option-zl">设备名称：</view>
						<view class="option-wa">{{ item.equipmentRowGuid }}</view>
						<!-- <view class="option-right"><image src="../../../static/images/reddjs.png" mode=""></image></view> -->
						<view class="option-right">
							<!-- <image v-if="item.status == '001'" src="../../../static/images/reddjs.png"></image>
							<image v-if="item.status == '002'" src="../../../static/images/blueyjs.png"></image>
							<image v-if="item.status == '003'" src="../../../static/images/greenbj.png"></image> -->
							<image :src="item.status == '001' ? '../../../static/images/reddjs.png' : item.status == '002' ? '../../../static/images/blueyjs.png' : '../../../static/images/greenbj.png'" mode=""></image>
						</view>
					</view>
					<view class="supply-option">
						<view class="option-zl">故障来源：</view>
						<view class="option-wa">{{ item.source }}</view>
					</view>
					<view class="supply-option">
						<view class="option-zl">故障类型：</view>
						<view class="option-wa">{{ item.type }}</view>
					</view>
					<view class="supply-option">
						<view class="option-zl">故障优先级：</view>
						<view class="option-wa">{{ item.priorityLevel }}</view>
					</view>
					<view class="supply-option">
						<view class="option-zl">操作时间：</view>
						<view class="option-wa">{{ item.startTime }}</view>
					</view>
				</navigator>
				<navigator
					v-if="!equipmentRun"
					class="supply-list"
					:url="'../../project-maintenance/malfunction-manage/malfunction-manage-detail?id=' + listData[index].id + '&status=' + listData[index].status"
					v-for="(item, index) in listData"
					:key="index"
				>
					<view class="supply-option">
						<view class="option-zl">设备名称：</view>
						<view class="option-wa">{{ item.equipmentRowGuid }}</view>
						<!-- <view class="option-right"><image src="../../../static/images/reddjs.png" mode=""></image></view> -->
						<view class="option-right">
							<image v-if="item.status == '001'" src="../../../static/images/reddjs.png"></image>
							<image v-if="item.status == '002'" src="../../../static/images/blueyjs.png"></image>
							<image v-if="item.status == '003'" src="../../../static/images/greenbj.png"></image>
							<!-- <image
								:src="
									item.status == '001'
										? '../../../static/images/reddjs.png'
										: item.status == '002'
										? '../../../static/images/blueyjs.png'
										: '../../../static/images/greenbj.png'
								"
								mode=""
							></image> -->
						</view>
					</view>
					<view class="supply-option">
						<view class="option-zl">故障来源：</view>
						<view class="option-wa">{{ item.source }}</view>
					</view>
					<view class="supply-option">
						<view class="option-zl">故障类型：</view>
						<view class="option-wa">{{ item.type }}</view>
					</view>
					<view class="supply-option">
						<view class="option-zl">故障优先级：</view>
						<view class="option-wa">{{ item.priorityLevel }}</view>
					</view>
					<view class="supply-option">
						<view class="option-zl">操作时间：</view>
						<view class="option-wa">{{ item.startTime }}</view>
					</view>
				</navigator>
				<!-- 使用组件 -->
				<uni-load-more :status="loadingType" :contentText="contentText"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniIcon from '@/components/uni-icon/uni-icon.vue';
import tools from '@/common/tools-new.js';
//1. 引入组件 uni-load-more.vue
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
//2. 引入组件 uni-search.vue
import uniSearch from '@/components/uni-search/uni-search.vue';
export default {
	props: {
		// equipmentRun:Boolean,
		eqId: String
	},
	data() {
		return {
			equipmentRun: true,
			iconType: ['search'],
			showRight: false,
			listParam: {
				parameter: 'equipmentRowGuid',
				operators: '0',
				queryValue: '',
				pageSize: 8,
				pageIndex: 1,
				orderBy: 'startTime',
				orderByType: '1'
			},

			//列表分页数据源
			listData: [],
			objData: [],

			//抽屉数据集合
			drawerData: [],

			//定义加载方式
			loadingType: 'more',

			//加载方式文字提示
			contentText: {
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},

			dic_data: [
				{
					name: '故障来源',
					data: []
				},
				{
					name: '状态',
					data: []
				},
				{
					name: '优先级别',
					data: []
				}
			]
		};
	},
	components: {
		uniDrawer,
		uniNavBar,
		uniIcon,
		uniLoadMore,
		uniSearch
	},
	methods: {
		//设备设施跳转来
		async getId(value) {
			this.listParam.queryValue = value;
			await this.getequipList();
			this.getDataList();
			this.equipmentRun = false;
		},

		hide() {
			this.showRight = false;
		},

		//抽屉数据
		getDrawList() {
			this.$api.MalfManage.MalfChoose()
				.then(res => {
					this.drawerData = res[1].data.result;
				})
				.catch(res => {
					//失败进行的操作/给出的提示
					uni.showToast({
						title: '接口数据请求失败',
						duration: 2000
					});
				});
		},

		//展开抽屉
		showDrawer() {
			this.showRight = true;
		},

		//关闭抽屉
		closeDrawer() {
			this.showRight = false;
		},

		confirm() {},

		back() {
			uni.navigateBack({
				delta: 1
			});
		},

		//加载数据，请求调用接口
		getDataList() {
			//显示动画加载
			this.loadingType = 'more';
			uni.showNavigationBarLoading();
			this.$api.MalfManage.ShowData(this.listParam).then(res => {
				var list = res[1].data.result.items;
				this.listData = list;
				this.listData.forEach(ele => {
					this.objData.forEach(e => {
						if (ele.equipmentRowGuid == e.id) {
							ele.equipmentRowGuid = e.equipmentName;
						}
					});
				});

				if (list.length == 0) {
					this.listData = [];
					this.loadingType = 'datas';
					//关闭加载动画
					uni.hideNavigationBarLoading();
					return false;
				}

				//取所属名称
				this.listData.forEach((ele, index) => {
					ele.source = this.$helper.getTextByValue('故障来源', ele.source);
					ele.type = this.$helper.getTextByValue('所属系统', ele.type);
					ele.priorityLevel = this.$helper.getTextByValue('优先级别', ele.priorityLevel);
					ele.startTime = this.$helper.dateFormat(ele.startTime, false);
				});

				//如有数据，关闭动画
				uni.hideNavigationBarLoading();
				//得到数据后停止刷新
				uni.stopPullDownRefresh();
			});
		},

		//初始化房间数据
		async getequipList() {
			await this.$api.MalfManage.GetEquiName()
				.then(res => {
					this.objData = res[1].data.result;
				})
				.catch(res => {
					//接口请求失败
					uni.showToast({
						title: '接口数据请求失败',
						duration: 2000
					});
				});
		},

		//检索条件
		searchData(infoData) {
			this.showRight = false;
			this.listParam = infoData;
			this.listParam.pageIndex = 1;
			this.getDataList();
		},

		//加载更多列表
		getMoreDataList() {
			this.listParam.pageIndex++;
			//loadingType!=more;直接返回
			if (this.loadingType != 'more') {
				return false;
			}
			this.loadingType = 'loading';
			//显示加载动画
			uni.showNavigationBarLoading();
			//请求接口
			this.$api.MalfManage.ShowData(this.listParam)
				.then(res => {
					if (this.listData.length == res[1].data.result.totalCount) {
						this.loadingType = 'datas';
						//关闭加载动画
						uni.hideNavigationBarLoading();
						return false;
					}

					this.listData = this.listData.concat(res[1].data.result.items);
					this.listData.forEach(ele => {
						this.objData.forEach(e => {
							if (ele.equipmentRowGuid == e.id) {
								ele.equipmentRowGuid = e.equipmentName;
							}
						});
					});

					var list = res[1].data.result.items;
					//取所属名称
					if (list.length > 0) {
						list.forEach((ele, index) => {
							ele.source = this.$helper.getTextByValue('故障来源', ele.source);
							ele.type = this.$helper.getTextByValue('所属系统', ele.type);
							ele.priorityLevel = this.$helper.getTextByValue('优先级别', ele.priorityLevel);
							ele.startTime = this.$helper.dateFormat(ele.startTime, false);
						});
					}

					//将loadingType归more重置
					this.loadingType = 'more';
					//关闭加载动画
					uni.hideNavigationBarLoading();
				})
				.catch(res => {
					// 失败进行的操作/给出提示
					uni.showToast({
						title: '接口数据请求失败',
						duration: 2000
					});
				});
		}
	},

	//下拉刷新请求一次数据
	onPullDownRefresh: function() {
		// console.log(this.listParam)
		this.listParam.pageIndex = 1;
		this.getDataList();
	},

	//触底的时候请求数据，即为上拉加载更多
	onReachBottom: function() {
		//console.log("onReachBottom")
		var timer = null;
		var _this = this;
		if (timer != null) {
			clearTimeout(timer);
		}
		timer = setTimeout(function() {
			_this.getMoreDataList();
		}, 1000);
	},

	onLoad: async function() {
		await this.$helper.getDicByCodeName(this.dic_data);
		await this.getequipList();
		this.getDataList();
		this.getDrawList();
	},

	onShow: async function() {
		await this.$helper.getDicByCodeName(this.dic_data);
		await this.getequipList();
		this.getDataList();
	},
	onNavigationBarButtonTap(e) {
		this.showRight = !this.showRight;
	},
	onBackPress() {
		if (this.showRight) {
			this.hide();
			return true;
		}
	}
};
</script>

<style>
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #f2f2f2;
}

.flex-item {
	font-size: 20px;
	text-align: center;
}

.uni-icon {
	padding-left: 42%;
}

.uni-navbar__header-btns:last-child {
	width: 120px;
}

.uni-navbar__header-btns {
	padding: 0;
}

.example-body {
	position: relative;
	left: 0;
	right: 0;
	top: 0;
	z-index: 1;
}

.supply-search {
	width: 94%;
	height: 36px;
	border-radius: 17px;
	background-color: #ffffff;
	margin: 0 auto;
	margin-top: 15px;
	position: relative;
	overflow: hidden;
}

.supply-search .search-container {
	width: 76%;
	height: 36px;
	margin: 0 auto;
	background-color: #ffffff;
	font-size: 14px;
	color: #999999;
	position: absolute;
	top: 0;
	left: 46px;
}

.supply-search .search-item {
	position: absolute;
	right: 14px;
	top: 10px;
}

.supply-search .right-ly {
	width: 12px;
	height: 17px;
	float: right;
	background: url(../../../static/images/chartly.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 10px;
	right: 16px;
}

.supply-list {
	width: 94%;
	background-color: #ffffff;
	border-radius: 3px;
	margin: 0 auto;
	margin-top: 11px;
}

.supply-list .supply-option {
	width: 94%;
	border-bottom: 1px solid #e5e5e5;
	margin: 0 auto;
	font-size: 16px;
	overflow: hidden;
	padding: 14px 0px;
}

.supply-option .option-zl {
	float: left;
	color: #666666;
}

.supply-option .option-wa {
	float: left;
	margin-left: 19px;
	color: #333333;
}

.supply-option .option-right {
	width: 50px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	float: right;
}

.supply-option .option-right image {
	max-width: 96%;
	max-height: 100%;
}

.uni-title .title-draw {
	width: 94%;
	height: 20px;
	margin: 0 auto;
	font-size: 14px;
	color: #333333;
	margin-top: 5px;
}

.uni-title .top-select {
	width: 94%;
	height: 25px;
	line-height: 25px;
	font-size: 14px;
	border-radius: 3px;
	outline: none;
	margin: 0 auto;
	margin-top: 10px;
}

.show-box .input.data-v-3b0702b8 {
	font-size: 12px;
}

.uni-title .draw-choose {
	width: 80%;
	height: 30px;
	margin: 0 auto;
	margin-top: 60px;
	font-size: 16px;
	text-align: center;
	line-height: 30px;
}

.uni-title .draw-choose .draw-chooseone {
	width: 46%;
	height: 100%;
	border: 1px solid #458cd0;
	border-radius: 2px;
	color: #458cd0;
	float: left;
}

.uni-title .draw-choose .draw-choosetwo {
	width: 46%;
	height: 100%;
	border: 1px solid #458cd0;
	background: #458cd0;
	color: #ffffff;
	border-radius: 2px;
	float: right;
}

input {
	min-height: inherit;
}

.draw-container {
	width: 82%;
	margin-left: 6px;
	margin-top: 5px;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 16px;
}

.draw-container .draw-option {
	background-color: #eeeeee;
	font-size: 14px;
	color: #666666;
	padding: 9px 18px;
	margin: 6px;
	border-radius: 3px;
	position: relative;
	overflow: hidden;
}

.draw-container .draw-active {
	background-color: #d9eafa;
	color: #458cd0;
}

.draw-container .active-pic {
	width: 22px;
	height: 22px;
	background: url(../../../static/images/right_png.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: -10px;
	right: -10px;
}

.listsearch {
	padding: 0;
	position: absolute;
	top: 6px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.uni-drawer.uni-drawer--visible .uni-drawer__content {
	overflow: auto;
}
</style>
